<template>
    <div v-theme:column="'wide'" id="show-blogs">
       <h1>博客总览</h1>
       <input type="text" v-model="search" placeholder="搜索"/>
       <div v-for="blog in filteredBlogs" class="single-blog">
            <router-link v-bind:to="'/p/' + blog.id">
              <h2 v-rainbow >{{blog.title | to-uppercase}}</h2>
            </router-link>
            <article>{{blog.body | snippet}}</article>
       </div>
    </div>
</template>
  
<script>
  
  export default {
    name: 'show-blogs',
    data(){
        return{
            blogs:[],
            search:""
        }
    },
    created(){
        this.$http.get('http://jsonplaceholder.typicode.com/posts')
        // 加载本地文件
        //this.$http.get('./../static/posts.json')
        .then(function(data){
            console.log(data);
            this.blogs = data.body.slice(0,10);
        })
    },
    computed:{
      filteredBlogs:function(){
        return this.blogs.filter((blog) => {
          return blog.title.match(this.search);
        })
      }
    },
    // 局部自定义filter和directive指令
    filters:{
      "to-uppercase":function(value){
          return value.toUpperCase();
      },
      "snippet":function(value){
          return value.slice(0,100) + "......";
      }
    },
    directives:{
      "rainbow":{
        bind(el,binding,vnode){
          el.style.color = "#" + Math.random().toString(16).slice(2,8);
        }
      }
    }
  }
</script>
  
<style scoped>
  #show-blogs{
    max-width: 800px;
    margin: 0 auto;
    padding: 5px;
  }
  .single-blog{
    padding: 20px;
    background: #eee;
    margin: 20px 0;
    box-sizing: border-box;
    border: 1px dotted #aaa;
  }
  #show-blogs a{
    color: #444;
    text-decoration: none;
  }
  input[type = "text"]{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
</style>
  